<template>
  <div class="container">
    <el-card class="box-card card">
      <div>
        <!-- 搜索区域 -->
        <el-form :model="artclesForm" ref="form" label-width="80px" size="normal" class="ipt">
          <el-form-item label="关键字" style="display: inline-block">
            <el-input
              v-model="artclesForm.keywords"
              placeholder="根据文章标题搜索"
              style="display: inline-block;width:300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态" style="display: inline-block">
            <el-select v-model="artclesForm.rids" placeholder="请选择">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="display: inline-block">
            <el-button size="small" @click="clear">清除</el-button>
            <el-button size="small" @click="onSubmit" type="primary">搜索</el-button>
          </el-form-item>
          <el-button
            type="success"
            size="small"
            class="el-icon-edit btn"
            @click="dialogVisible=true"
          >&emsp; 新增技巧</el-button>
        </el-form>
        <!-- 消息提示 -->
        <el-alert :title="'数据一共'+counts+'条'" type="info" show-icon style="margin-bottom:20px"></el-alert>
        <!-- 表格区域 -->
        <el-table :data="tableFrom">
          <el-table-column align="center" label="序号" type="index"></el-table-column>
          <el-table-column align="center" label="文章标题" width="400px">
            <template slot-scope="scope">
              {{scope.row.title}}&emsp;
              <i
                slot="reference"
                :class="scope.row.videoURL ? 'el-icon-film':''"
                style="color:blue;cursor:pointer;fontSize:16px"
                @click="playVideo(scope.row.videoURL)"
              ></i>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="visits" label="阅读数"></el-table-column>
          <el-table-column align="center" prop="username" label="录入人"></el-table-column>
          <el-table-column align="center" label="录入时间">
            <template slot-scope="scope">{{scope.row.createTime | parseTimeByString}}</template>
          </el-table-column>
          <el-table-column align="center" label="状态">
            <template slot-scope="scope">
              <div v-if="scope.row.state == 1">已启用</div>
              <div v-else>已禁用</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <div v-if="scope.row.state  === 1">
                <el-link type="primary" @click="preview(scope.row)">预览</el-link>&nbsp;
                <el-link type="primary" @click="enable(scope.row)">禁用</el-link>&nbsp;
                <el-link type="info" disabled>修改</el-link>&nbsp;
                <el-link type="info" disabled>删除</el-link>&nbsp;
              </div>
              <div v-else>
                <el-link type="primary" @click="preview(scope.row)">预览</el-link>&nbsp;
                <el-link type="primary" @click="enable(scope.row)">启用</el-link>&nbsp;
                <el-link type="primary" @click="editForm(scope.row)" >修改</el-link>&nbsp;
                <el-link type="primary" @click="delForm(scope.row.id)" >删除</el-link>&nbsp;
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          layout="sizes,prev, pager, next,jumper,->,total"
          :total="counts"
          :page-sizes="[5,10]"
          :page-size="artclesForm.pagesize"
          :current-page="artclesForm.page"
          @size-change="sizeChange"
          @current-change="pageChange"
        ></el-pagination>
        <!-- 修改文章弹框 -->
        <el-dialog title="修改文章" :visible.sync="editArticle" width="50%">
          <edit-article @close="editClose" v-if="editArticle" :row="articleRow" />
        </el-dialog>
        <!-- 预览文章-->
        <el-dialog title="预览文章" :visible.sync="previewArticle" width="50%">
          <preview-article :row="previewRow" v-if="previewArticle" />
        </el-dialog>
        <!-- 新增技巧 -->
        <el-dialog title="新增文章" :visible.sync="dialogVisible" width="50%">
          <add-article @close="close" v-if="dialogVisible" />
        </el-dialog>
      </div>
      <!-- 弹框 -->
      <div class="box" v-if="videoDig">
        <div class="close">
          <span class="el-icon-close" @click="videoDig=false"></span>
        </div>
        <div class="vedio">
          <video class="videoURL" :src="dataUrl" autoplay controls></video>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { list, remove, changeState, simple } from '@/api/hmmm/articles'
import EditArticle from './components/eidt-article'
import PreviewArticle from './components/preview-article'
import AddArticle from './components/add-article'
import '@/styles/style.css'
let items = {
    keyword: '', //关键字
    page: 1,
    pagesize: 10,
    rids: null
}
export default {
    name: 'Article',
    data() {
        return {
            //搜索表单
            artclesForm: { ...items },
            //表单验证
            value: '', //下拉选中
            // 表格数据
            tableFrom: [],
            state: 0, //默认状态
            counts: 0, //总数
            editArticle: false, //修改文章弹框变量
            articleRow: null, //文章编辑id
            previewArticle: false, //预览文章弹框变量
            //预览id
            previewRow: null,
            dialogVisible: false, //新增文章弹框变量
            videoDig: false,
            dataUrl: ''
        }
    },
    components: {
        EditArticle,
        PreviewArticle,
        AddArticle
    },
    created() {
        this.getArticlesList()
    },
    methods: {
        //获取表单数据
        async getArticlesList() {
            let { data: res } = await list({
                page: this.artclesForm.page,
                pagesize: this.artclesForm.pagesize
            })
            this.counts = res.counts
            this.tableFrom = res.items
            console.log(res)
        },
        async onSubmit() {
            let { data: res } = await list({
                keyword: this.artclesForm.keywords,
                state: this.artclesForm.rids
            })
            console.log(1)

            this.counts = res.counts
            this.tableFrom = res.items
        },
        sizeChange(val) {
            this.artclesForm.pagesize = val
            this.getArticlesList()
        },
        pageChange(val) {
            this.artclesForm.page = val
            this.getArticlesList()
        },
        //删除事件
        async delForm(row) {
            try {
                await this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                let { data: res } = await remove({
                    id: row
                })

                this.$message.success('删除成功')
                if (this.page !== 1 && this.pagesize == 1) {
                    this.page--
                }
                this.getArticlesList()
            } catch (error) {
                this.$message.error('取消删除')
            }
        },
        // 修改
        editForm(row) {
            this.articleRow = row
            this.editArticle = true
        },
        //预览文章
        preview(row) {
            this.previewArticle = true
            this.previewRow = row
        },
        //启用
        async enable(row) {
            let { data: res } = await changeState({
                state: row.state === 1 ? 0 : 1,
                id: row.id
            })
            this.$message.success('操作成功')
            this.getArticlesList()
        },
        close() {
            this.dialogVisible = false
            this.getArticlesList()
        },
        editClose() {
            this.editArticle = false
            this.getArticlesList()
        },
        clear() {
            this.artclesForm = { ...items }
            this.getArticlesList()
        },

        playVideo(url) {
            this.videoDig = true
            this.dataUrl = url
        }
    }
}
</script>

<style scoped >
</style>
